<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'提现',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright" @click="edit('/pages/workbench/jiben/tixianjl?id=',listid)">
					<view class="nostrongtext">记录</view>
				</view>
			</view>
		</header-top>
		<view class="ffffff mainpadding_top">
			<view class="titletext">开户行：{{dataAll.open_bank}},{{dataAll.name}}尾号{{dataAll.bank_account.substr(-4)}}</view>
		</view>
		<view class="ffffff mainpadding_top">
			<view class="xiaohei">
				可提现 
				<text class="xiaolv">{{ktxNum}}</text>,
				余额
				<text class="xiaolan">{{dataAll.money}}</text>,
				欠款
				<text class="xiaohong">{{dataAll.qk_price}}</text>
			</view>
			<view class="titletext margin_top">提现金额</view>
			<view class="flexleft margin_top">
				<view class="titletext">￥</view>
				<input type="number" class="titletext" style="color: 0BBDCB;" v-model="price">
			</view>
		</view>
		<view class="ffffff mainpadding_top">
			<view class="titletext">提现凭证</view>
			<view class="flexleft margin_top">
				<!-- 已上传的图片 -->
				<view class="select-box flexcolumn" v-for="(item,index) in image" :key="index">
					<view class="upimageicon">
						<image :src="item" mode=""></image>
						<image class="shanchu" src="@/static/image/system/shanchu3.png" @click="deleimgae(index)"
							mode=""></image>
					</view>
				</view>
				<!-- 未上传 -->
				<view class="select-box flexcenter" v-show="upshow" @click="uploadImg">
					<view class="upimageicon">
						<image src="@/static/image/system/upimageicon.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ffffff mainpadding_top">
			<view class="titletext">提现备注</view>
			<textarea class="textarea mainpadding radius margin_top" placeholder="请输入提现备注" v-model="notes"></textarea>
		</view>
		<view class="mainpadding_top">
			<view class="xiaohong">注:{{withdrawal_notes}}</view>
		</view>
		<view class="mainpadding" @click="submit">
			<view class="surebtns flexcenter margin_top">确定</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				image: [],
				notes: "", //说明
				price:"",
				listid:"",
				withdrawal_notes:"",
				dataAll:{},
				ktxNum:0,
				pageShow:false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getsystem()
			this.getdetail()
		},
		computed: {
			upshow() {
				if (this.image.length == 3) {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			getsystem(){
				httpRequest.request('/dhtapi/index/getConfigInfo', 'POST', {
				}, false, false, true).then(res => {
					this.withdrawal_notes = res.data.withdrawal_notes
					
				})
			},
			getdetail(){
				httpRequest.request('/dhtapi/Custom/detail', 'POST', {
					id:this.listid,
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.ktxNum = (Number(res.data.money) - Number(res.data.qk_price))>0?Number(res.data.money) - Number(res.data.qk_price):0
					this.pageShow = true
				})
			},
			
			edit(url,val){
				uni.navigateTo({
					url:url+val
				})
			},
			submit() {
				if(this.price==""){
					httpRequest.toast("请输入提现金额")
					return false
				}
				if(this.image.length==0){
					httpRequest.toast("请上传提现凭证")
					return false
				}
				if(this.notes==""){
					httpRequest.toast("请输入提现备注")
					return false
				}
				if(Number(this.price)>Number(this.ktxNum)){
					httpRequest.toast("提现金额大于可提现金额无法提现！")
					return false
				}
				if(this.price==0){
					httpRequest.toast("提现金额不能为0")
					return false
				}
				httpRequest.request('/dhtapi/Custom/customWithdrawal', 'POST', {
					price:this.price,
					id:this.listid,
					images:this.image.join(),
					notes:this.notes,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			datechange(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			dateFormat(time) {
				return httpRequest.dateFormat(time)
			},
			// 删除上传图片
			deleimgae(index) {
				this.image.splice(index, 1)
			},
			//上传图片
			uploadImg() {
				let _this = this;
				let images = _this.image;
				let num = 3 - images.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], _this.image)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], _this.image)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, image) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					console.log(res, "上传图片")
					// let image_item = res.data.fileUrl;
					this.image.push(res.fullurl)
					console.log(this.avatar, "上传图片this.avatar")
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss">
	.maincolor_text {
		font-weight: 500;
		color: #0BBDCB;
	}

	.addresstext {
		color: #999999;
	}

	// 选择
	.select-box {
		width: 33.33%;
	}

	// 陈列拍照
	.upimageicon {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.shanchu {
		width: 31rpx !important;
		height: 30rpx !important;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}

	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
</style>